// 合并配置，比较专业的模块：webpack-merge
// 合并配置，最好不要用Object.assign，它在复制对象时后面的配置会完全覆盖掉前面的配置
const { merge } = require('webpack-merge')
const common = require('./webpack.common.js')
const path = require('path')
const CopyWebpackPlugin = require('copy-webpack-plugin')

module.exports = merge(common, {
    mode: 'development',
    plugins: [
        // webpack-sev-server 本地调试时是否需要 copy 公共资源文件
        new CopyWebpackPlugin({
            patterns: [
                { from: "./public/*.ico", to: "./"},
            ],
        })
    ],
    // watch: true,             // 热更新方案1：监听源码文件更改自动构建，监听磁盘文件自动刷新浏览器（配合browser-sync刷新浏览器）
    target: "web",              // webpack5的一个bug，需要打开才能自动刷新浏览器，参考：https://blog.csdn.net/xiaolongbaobushibao/article/details/116664883
                                // 使用devServer是不用打开watch
    devServer: {                // 热更新方案2：本地开发服务器，监听源码文件自动构建和刷新浏览器，打包结果存在内存而不是磁盘中
        host: '127.0.0.1',  
        port: '8080',
        contentBase: path.resolve(__dirname,'dist'),// 指定静态资源路径的根目录，需要对应output:path为dist，
        open: true,             // 自动打开浏览器
        inline: true
        // hot: true,           // 模块热替换，如果热替换失败就自动回到页面自动刷新
        // hotOnly: true,       // 模块热替换，如果热替换失败不会自动刷新页面
        // watchContentBase: true,
        // proxy: {             // 配置代理，防止跨域问题
        //     '/api': {
        //         target: 'https://api.github.com', // http://localhost:8080/api/users -> https://api.github.com/api/users
        //         pathRewrite: {                    // http://localhost:8080/api/users -> https://api.github.com/users
        //             '^/api': ''
        //         },
        //         // 不能使用 localhost:8080 作为请求 GitHub 的主机名
        //         changeOrigin: true
        //     }
        // }
    }
})